import type { App } from 'vue'
import { isContainArr } from '@/utils/validate'
import { useAuthStore } from '@/stores/auth'

/*
 用户权限指令
 1. v-auth="[xxx]" 单个权限校验
 2. v-auths="[xxx,xxx]" 多个权限校验，只要有一个满足即可 
 3. v-auth-all="[xxx,xxx]" 多个权限校验, 全部满足则显示
*/
export async function authDirective(app: App) {
  const authStore = useAuthStore()
  // 单个权限校验
  app.directive('auth', {
    mounted(el, binding) {
        // 获取用户当前所拥有的所有按钮权限
        const buttonList = authStore.buttonList;
        // 如果没有权限，将元素移除
        if (!buttonList.some((btn:string) => btn === binding.value)) {
            el.parentNode?.removeChild(el);
        }
    }
  })
  // 多个权限校验，满足其中一个则显示
  app.directive('auths', {
    mounted(el, binding) {
        // 获取用户当前所拥有的所有按钮权限
        const buttonList = authStore.buttonList;
        // 如果没有权限，将元素移除
        if (!buttonList.some((btn:string) => binding.value.indexOf(btn) != -1)) {
            el.parentNode?.removeChild(el);
        }
    }
  })
  // 多个权限校验，全部满足则显示
  app.directive('auth-all', {
    mounted(el, binding) {
        // 获取用户当前所拥有的所有按钮权限
        const buttonList = authStore.buttonList;
        // 如果没有权限，将元素移除
        if (!isContainArr(buttonList, binding.value)) {
            el.parentNode?.removeChild(el);
        }
    }
  })
}